<template>
  <div class="task_query">
    <div class="task_act">
      <el-button type="primary" round size="small" @click="toSeizeOrders">+ 抢单</el-button>
      <!-- <el-button plain round size="small">导入任务</el-button> -->
    </div>
   <el-scrollbar class="task_scroll">
    <div class="loading" v-loading="loading">
      <div class="task_all" v-if="taskData.length>0" >
        <template v-for="(item,index) in  taskData">
          <div class="every_task"  :key="index" v-if="item.data">
            <div class="top_color" :style="{backgroundImage:showColor(item)}"></div>
            <div class="evert_card">
              <div class="type">{{item.type}}({{item.rowCount}})</div>
              <div class="task_content">
                <div class="every_task_content" v-for="(el,inx) in item.data" :key="inx">
                  <div class="content_left">
                    <el-checkbox 
                      v-if="item.type == '抢单任务'"
                      @change="handleChange($event,el)"
                    ></el-checkbox>
                  </div>
                  <div class="content_right" @click="toOpenForm(el)">
                    <div class="task_title task">{{el.subject}}</div>
                    <div class="task_no task">编号  {{el.taskNo}}</div>
                    <div class="task_charge task"><span class="responsible">负责</span><span>{{el.person_in_charge}}</span></div>
                    <div class="task_time task">任务期限  {{el.deadline}}</div>
                    <div class="task_delay" v-if="item.type == '逾期'">逾期{{el.overdueDay}}天</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
      </div>
      <div class="nodata" v-else-if="noData">暂无数据</div>
    </div>
   </el-scrollbar>
  </div>
</template>
<script>
import {
  getTaskQuery,
  getTaskGradOrder
} from "@/api.js"
export default {
  // inject: [
  //   'addTab',
  // ],
  data() {
    return {
      appName: "",
      taskData: [],//任务数据
      taskList:[],//选中的抢单数据
      loading:false,
      noData:false,
    };
  },
  created() {
    let queryData = this.$route.query
    this.openParams = {
      magicAppName:queryData.magicAppName,
      appId:queryData.appId,
      linkType:queryData.linkType,
      userId: queryData.userId,
      type: queryData.type,
      id: queryData.id,//菜单id
    }
    this.appName = this.openParams.magicAppName
    // let apps = this.$root.applications;
    // apps.forEach((item)=>{
    //   if(item.id == this.openParams.appId){
    //     this.appName = item.name;
    //   }
    // })
    this.ToGetTaskQuery()
  },
  methods: {
    showColor(item) {
      if(item.type == '抢单任务') {
        return 'linear-gradient(to right, #A373FF ,#70B6FF)'
      }else if(item.type == '进行中') {
        return 'linear-gradient(to right, #76B9FF ,#19AF19)'
      }else if(item.type == '即将逾期') {
        return 'linear-gradient(to right, #82EB8B , #FFA200)'
      }else {
        return 'linear-gradient(to right, #F00B0B ,#FCA103)'
      }
    },
    //复选框选中
    handleChange(val,item) {
      if(val) {
        let obj= {
          TaskId:item.docId
        }
        this.taskList.push(obj)
      }else {
        this.taskList.forEach((el,index) => {
          if(el.TaskId == item.docId) {
            this.taskList.splice(index,1)
          }
        })
      }
    },
    //抢单
    toSeizeOrders() {
      if(this.taskList.length == 0) {
        this.$notify.warning({
          title: '请先勾选一条抢单任务',
          message: '',
        }); 
        return
      }
      let data = {
        TaskList : this.taskList,
        person_in_charge:this.$root.user.id
      }
      getTaskGradOrder(
        this.appName,
        data,
        {
          onSucess: res => {
            if(res.data.errcode==0) {
              this.$notify.success({
                title: '抢单成功',
                message: '',
              }); 
              this.ToGetTaskQuery()
            }
          }
        }
      )
    },
    //点击打开表单
    toOpenForm(el) {
      debugger
      let openParams = this.openParams
      let params = {
        linkType: "00",
        appId: openParams.appId,
        active: true,
        actionContent:el.formId,
        name: '',
        refreshId: openParams.id,
        title:'',
        _select: el.docId,
        id: el.docId,
      }
      // this.addTab(params)
      top.obpmOAction('addTab',params)
    },
    ToGetTaskQuery() {
      this.loading = true
      this.taskData = []
      let queryData = this.openParams
      let data = {
        userId : queryData.userId,
        type : queryData.type,
      }
      getTaskQuery(
        this.appName,
        data,
        {
          onSucess: res => {
            debugger
            this.loading = false
            let resData = res.data.data
            let seizeOrders = {}
            if(resData && resData.length > 0){
              for(let i = 0; i < resData.length; i ++) {
                if(resData[i].type == '抢单任务') {
                  seizeOrders = resData[i]
                  resData.splice(i,1)
                  break;
                }
              }
              this.taskData.push(seizeOrders)
              resData.forEach(item => {
                this.taskData.push(item)
              });
            }else {
              this.noData = true
            }
          }
        }
      )
    }
  },
};
</script>
<style lang="scss">
@import '../assets/style/task_query.scss';
</style>